<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="/wolive.ico"/>
    <title>手机在线客服</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    {load href="__libs__/push/pusher.min.js"/}
    {load href="__libs__/jquery/jquery.min.js"/}
    {load href="__libs__/layui/layui.js"/}
    {load href="__libs__/jquery/jquery.cookie.js"/}
    <link rel="stylesheet" type="text/css" href="__style__/mobile/mobile.css?g=3&v=32383637303234363930">
    {load href="__libs__/jquery/jquery.form.min.js"/}
    {load href="__libs__/layer/skin/layer.css"/}
    {load href="__libs__/layui/css/layui.css"/}
    {load href="__libs__/layer/layer.js"/}
    <script src="__script__/main.js?v=3.16"></script>

    <script type="text/javascript" src="/assets/libs/webrtc/recorder.js"></script>
    <script>
        var visiter = '{$visiter}';
        var business_id = '{$business_id}';
        var record = '{$from_url}';
        record.replace("%23", "#");
        record.replace("%26", "&");
        var pic = '{$avatar}';
        var channel = '{$channel}';
        var visiter_id = '{$visiter_id}';
        var in_black_list = '{$in_black_list}';

        var cid = '{$groupid}';
        var url = '{$url}';
        if (pic == "") {
            pic = "/assets/images/index/avatar-red2.png";
        }
        var service_id = 0;
        // 专属客服
        var exclusive_service_name = '{$exclusive_service_name}';

        var wolive_connect = function () {

            pusher = new Pusher('{$app_key}', {
                encrypted: {$value}
                ,enabledTransports: ['ws']
                ,wsHost: '{$whost}'
                ,{$port}: {$wport}
                ,authEndpoint: '/admin/login/auth'
                ,disableStats: true
            });

            var channels = pusher.subscribe("cu" + channel);
            channels.bind('pusher:subscription_succeeded', function () {
                $.cookie("cid", "");
                if (typeof pusher.first_connect != "undefined") {
                    var clear = function() {
                        $.each($(".conversation .chatmsg"), function (index, item) {
                            !$(item).find('.question').length && $(item).remove();
                        });
                    }
                    getdata(clear);
                }
                pusher.first_connect = false;
            });
            channels.bind('my-event', function (data) {

                if (data.message.service_id != service_id) {
                    return;
                }

                var msg = '';
                msg += '<li class="chatmsg"><div style="position: absolute;top:2px;left:3px;">';
                msg += '<img class="my-circle  se_pic" src="' + data.message.avatar + '" width="40px" height="40px"></div>';
                var picture_class = is_picture(data.message.content) ? ' no_border' : '';
                msg += "<div class='outer-left"+picture_class+"'><div class='service'>";
                msg += "<pre>" + data.message.content + "</pre>";
                msg += "</div></div>";
                msg += "</li>";
                $(".chatmsg_notice").remove();
                $(".chatmsg_no").remove();
                $(".conversation").append(msg);
                scroll_bottom();
                
                if ($.cookie('state') != 'off') {
                    audioElementHovertree = document.createElement('audio');
                    audioElementHovertree.setAttribute('src', "/upload/voice/default.mp3");
                    audioElementHovertree.setAttribute('autoplay', 'autoplay');
                }
            });

            channels.bind('first_word', function (data) {
                var msg = '';
                msg += '<li class="chatmsg_no chatmsg"><div style="position: absolute;left:3px;">';
                msg += '<img class="my-circle  se_pic" src="' + data.message.avatar + '" width="40px" height="40px"></div>';
                msg += "<div class='outer-left'><div class='service'>";
                msg += "<pre>" + data.message.content + "</pre>";
                msg += "</div></div>";
                msg += "</li>";

                $(".conversation").append(msg);

            });

            channels.bind('cu_notice', function (data) {
                $("#img_head").attr("src", data.message.avatar);
                $("#services").text(data.message.nick_name);
                $(".chatmsg_notice").remove();
                $.cookie("services", data.message.service_id);
                service_id = data.message.service_id;
                exclusive_service_name = '';
                getquestion(business_id);
                getdata();
            });

            function getlisten(chas) {
                var channels = pusher.subscribe("se" + chas);

                //通知游客 客服离线
                channels.bind('logout', function (data) {
                    $("#status").text("[离线]");
                });
                //表示客服在线
                channels.bind("geton", function (data) {
                    $("#status").text('');
                });
            }

            channels.bind('getswitch', function (data) {

                $("#img_head").attr("src", data.message.avatar);
                $("#services").text(data.message.nick_name);
                $("#services").attr("data", data.message.service_id);
                service_id = data.message.service_id;
                $(".chatmsg_notice").remove();
                $(".chatmsg_no").remove();
                $(".chatmsg").remove();

                var msg = '';
                msg += '<li class="chatmsg"><div style="position: absolute;left:3px;">';
                msg += '<img class="my-circle  se_pic" src="' + data.message.avatar + '" width="40px" height="40px"></div>';
                msg += "<div class='outer-left'><div class='service'>";
                msg += "<pre> 已经将您转接到其他客服  " + data.message.nick_name + "</pre>";
                msg += "</div></div>";
                msg += "</li>";
                $(".conversation").append(msg);

            });

            if ($.cookie("services")) {
                var id = $.cookie("services");
                getlisten(id);
            }

            pusher.connection.bind('state_change', function (states) {
                if (states.current == 'unavailable' || states.current == "disconnected" || states.current == "failed") {
                    $.cookie("cid", "");
                    var id = $.cookie("services");
                    if (id) {
                        pusher.unsubscribe("se" + id);
                    }

                    pusher.unsubscribe("cu" + channel);
                    if (typeof pusher.isdisconnect == 'undefined') {
                        pusher.isdisconnect = true;
                        pusher.disconnect();
                        delete pusher;
                        window.setTimeout(function () {
                            wolive_connect();
                        }, 1000);
                    }
                }
            });

            pusher.connection.bind('connected', function () {
                console.log('connected');
            });
        }


    </script>
    <style type="text/css">

        #close_icon {
            position: absolute;
            right: 10px;
            top: 2px;
            cursor: pointer;
        }

        .input-but {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            width: 30px;
            height: 30px;

        }

        .my-circle {
            border-radius: 30px;
        }

        .size {
            min-width: 30px;
            height: 25px;
            line-height: 30px;
            border: none;
        }

        .fileinput {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 0px;
            right: 0px;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer;
        }

        .chatmsg_no {
        }

        .chatmsg_question {
            position: relative;
            margin-bottom: 228px;
        }

    </style>
</head>
<body>
<div id="container">
    <div class="header">

        <a href="javascript:;" onclick="history.back(-1);" style="float:left;color:#ddd;font-size:16px">返回</a><span id="services" style="color: #FFF;"></span><span id="status"></span>

    </div>

    <section class="content" id="wrap" style="background:url({$group.bg}) no-repeat;background-size: 100%;">
        <ul class="conversation">

        </ul>
    </section>

    <div class="foot_all">
        <div class="tool_box">
            <div class="wl_faces_content">
                <div class="wl_faces_main">

                </div>
            </div>
        </div>

        <div class="foot_msg">
            <div class="faq_box">
                <ul>

                </ul>
                <div class="faq-right-arrow"></div>
            </div>
            <div class="msg-toolbar">
                <a id="face_icon" href="javascript:" onclick="faceon()"><i class="layui-icon" style="font-size: 26px;">
                    &#xe60c;</i></a>

                {if $atype == 'open'}
                <a onclick="getaudio()"><i class="layui-icon" style="font-size: 22px;cursor: pointer;">&#xe688;</i></a>
                {/if}

                <a id="images" href="javascript:">
                    <form id="picture" enctype="multipart/form-data">
                        <div class="layui-box input-but  size">
                            <input type="file" name="upload" class="fileinput" accept="image/*" onchange="put()"/>
                            <i class="layui-icon" style="font-size: 30px;">&#xe60d;</i>
                        </div>
                    </form>
                </a>
                <a id="files" href="javascript:">
                    <form id="file" enctype="multipart/form-data">
                        <div class="layui-box input-but  size">
                            <input type="file" name="folder" class="fileinput" onchange="putfile()"/>
                            <i class="layui-icon" style="font-size: 25px;">&#xe61d;</i>
                        </div>
                    </form>
                </a>

                <a id="sendlink" href="javascript:" onclick="sendlink()"><i class="layui-icon" style="font-size: 26px;">
                    &#xe678;</i>
                </a>

            </div>
            <div class="footer">
                <input type="text" id="text_in" class="layui-input" style="margin-top: 1px;margin-left:5px;width: 80%" onblur="scroll_window()" value="face[微笑]"/>
                <button class="layui-btn layui-btn-normal" style="position: absolute;right: 5px;top:1px;width: 17.5%"
                        onclick="send()">发送
                </button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="__script__/moblie/mochat.js?v=5.1.15"></script>
<script>

    var getaudio = function () {

        var sid = $.cookie('services');
        if (sid == service_id) {

            //音频先加载
            var audio_context;
            var recorder;
            var wavBlob;
            //创建音频
            try {
                // webkit shim
                window.AudioContext = window.AudioContext || window.webkitAudioContext;
                navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.mediaDevices.getUserMedia;
                window.URL = window.URL || window.webkitURL;

                audio_context = new AudioContext;

                if (!navigator.getUserMedia) {
                    console.log('语音创建失败');
                }
            } catch (e) {
                show_user_media_error(e);
                return;
            }
            navigator.mediaDevices.getUserMedia({audio: true}).then(function (stream) {
                var input = audio_context.createMediaStreamSource(stream);
                recorder = new Recorder(input);

                var falg = window.location.protocol;
                if (falg == 'https:') {
                    recorder && recorder.record();

                    //示范一个公告层
                    layui.use(['jquery', 'layer'], function () {
                        var layer = layui.layer;

                        layer.msg('录音中...', {
                            icon: 16
                            , shade: 0.01
                            , skin: 'layui-layer-lan'
                            , time: 0 //20s后自动关闭
                            , btn: ['发送', '取消']
                            , yes: function (index, layero) {
                                //按钮【按钮一】的回调
                                recorder && recorder.stop();
                                recorder && recorder.exportWAV(function (blob) {
                                    wavBlob = blob;
                                    var fd = new FormData();
                                    var wavName = encodeURIComponent('audio_recording_' + new Date().getTime() + '.wav');
                                    fd.append('wavName', wavName);
                                    fd.append('file', wavBlob);

                                    var xhr = new XMLHttpRequest();
                                    xhr.onreadystatechange = function () {
                                        if (xhr.readyState == 4 && xhr.status == 200) {
                                            jsonObject = JSON.parse(xhr.responseText);

                                            voicemessage = '<div style="cursor:pointer;text-align:center;" onclick="getstate(this)" data="play"><audio src="' + jsonObject.data.src + '"></audio><i class="layui-icon" style="font-size:25px;">&#xe652;</i><p>音频消息</p></div>';
                                            var content = 'voice('+jsonObject.data.src+')';

                                            var sid = $('#channel').text();

                                            var time;

                                            var sdata = $.cookie('cu_com');

                                            if (sdata) {
                                                var json = $.parseJSON(sdata);
                                                var img = json.avater;

                                            }

                                            if ($.cookie("itime") == "") {
                                                var myDate = new Date();
                                                time = myDate.getHours() + ":" + myDate.getMinutes();
                                                var timestamp = Date.parse(new Date());
                                                $.cookie("itime", timestamp / 1000);

                                            } else {

                                                var timestamp = Date.parse(new Date());
                                                var lasttime = $.cookie("itime");
                                                if ((timestamp / 1000 - lasttime) > 30) {
                                                    var myDate = new Date(timestamp);
                                                    time = myDate.getHours() + ":" + myDate.getMinutes();
                                                } else {
                                                    time = "";
                                                }

                                                $.cookie("itime", timestamp / 1000);
                                            }

                                            var str = '';
                                            str += '<li class="chatmsg"><div class="showtime">' + time + '</div>';
                                            str += '<div style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle cu_pic" src="' + pic + '" width="40px" height="40px"></div>';
                                            str += "<div class='outer-right'><div class='customer'>";
                                            str += "<pre>" + voicemessage + "</pre>";
                                            str += "</div></div>";
                                            str += "</li>";

                                            $(".conversation").append(str);
                                            $("#text_in").empty();

                                            scroll_bottom();

                                            $.ajax({
                                                url: "/admin/event/chat",
                                                type: "post",
                                                data: {
                                                    visiter_id: visiter_id,
                                                    content: content,
                                                    business_id: business_id,
                                                    avatar: pic,
                                                    record: record,
                                                    service_id: service_id
                                                },
                                                dataType: 'json',
                                                success: function (res) {
                                                    switch (res.code) {
                                                        case 0:
                                                            return;
                                                        case 4:
                                                            layer.open({
                                                                title:'提示框',
                                                                area: ['300px', '180px'],
                                                                content:res.msg,
                                                                btn:['是','否'],
                                                                yes:function(){
                                                                    location.reload();
                                                                },
                                                                btn2:function(){
                                                                    layer.close();
                                                                }
                                                            });
                                                            break;
                                                        default:
                                                            layer.msg(res.msg,{icon:2});
                                                    }
                                                }
                                            });
                                        }
                                    };
                                    xhr.open('POST', '/admin/event/uploadVoice');
                                    xhr.send(fd);
                                });
                                recorder.clear();
                                layer.close(index);
                            }
                            , btn2: function (index, layero) {
                                //按钮【按钮二】的回调
                                recorder && recorder.stop();
                                recorder.clear();
                                audio_context.close();
                                layer.close(index);
                            }
                        });

                    });
                } else {

                    layer.msg('音频输入只支持https协议！');

                }


            }).catch(function (e) {
                show_user_media_error(e);
            })


        }
    }


    var getstate = function (obj) {

        var c = obj.children[0];

        var state = $(obj).attr('data');

        if (state == 'play') {
            c.play();
            $(obj).attr('data', 'pause');
            $(obj).find('i').html("&#xe651;");

        } else if (state == 'pause') {
            c.pause();
            $(obj).attr('data', 'play');
            $(obj).find('i').html("&#xe652;");
        }

        c.addEventListener('ended', function () {
            $(obj).attr('data', 'play');
            $(obj).find('i').html("&#xe652;");

        }, false);
    }

    //发送 语音通话 链接
    var sendlink = function () {
        $("#text_in").val("face[微笑]");
        send();
    };


    document.getElementById("wrap").onscroll = function () {
        var t = document.getElementById("wrap").scrollTop;
        if (t == 0) {
            if ($.cookie("cid") != "") {
                getdata();
            }
        }
    }

    // 给对话框里没有添加getbig事件的图片添加getbig事件
    /*$(function(){
        $('.content').on("click", "pre img[onclick!='getbig(this)']", function (e) {
            getbig(this);
            return false;
        });
    });*/

</script>

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp w_index_mobile_bg" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe.
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides.
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<!-- Core CSS file -->
<link rel="stylesheet" href="/assets/libs/photoswipe/photoswipe.css">

<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite,
     - preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="/assets/libs/photoswipe/default-skin.css">

<!-- Core JS file -->
<script src="/assets/libs/photoswipe/photoswipe.min.js"></script>

<!-- UI JS file -->
<script src="/assets/libs/photoswipe/photoswipe-ui-default.min.js"></script>

</body>
</html>
